import React from "react";
import axios from 'axios'

const GlobalContext=React.createContext()
class FilmItem extends React.Component{
    render(){
        let {poster,name,filmId,synopsis,category}=this.props
        let imgStyle={
            float:'left',
            width:'120px'
        }
        return(
            <GlobalContext.Consumer>
                {
                    (value)=>{
                        return  <div style={{overflow:'hidden',marginBottom:'10px'}} key={filmId} onClick={()=>{
                                        value.changeInfo(synopsis)
                                    }}>
                                    <img src={poster} style={{...imgStyle}} alt={name}/>
                                    <div>
                                        <h3>{name}</h3>
                                        <span>类型：{category}</span>
                                    </div>
                                </div>    
                    }
                }
            </GlobalContext.Consumer>
        )
    }
} 

class FilmDetail extends React.Component{
    render(){
        let boxStyle={
            position:'fixed',
            background:'yellow',
            width:'300px',
            top:'50px',
            right:'50px',
            padding:'20px'
        }
        return(
            <GlobalContext.Consumer>
                {
                    (value)=>{
                        return <div style={boxStyle}>
                            {value.info}
                        </div>
                    }
                }
            </GlobalContext.Consumer>
            
        )
    }
} 

export default class App extends React.Component{
    constructor(){
        super()
        this.state={
            filmList:[],
            info:'222'
        }
        axios.get('/07test.json').then(res=>this.setState({filmList:res.data}))
    }
    render(){
        return(
            <GlobalContext.Provider value={{
                info:this.state.info,
                changeInfo:(v)=>{
                    this.setState({info:v})
                }
            }}>
                <div>
                    {
                        this.state.filmList.map(item=><FilmItem {...item}/>)
                    }
                    <FilmDetail/>
                </div>
            </GlobalContext.Provider>
        )
    }
}
